<template>
  <DynamicForm v-model="formDataList[index]" :form-config.sync="formConfig">
    <template #srcNoFormItem="item,data">
      <div>
        <button @click="$refs['myfile' + index].click()">文件上传</button>
        <input type="file" :ref="'myfile' + index" :id="'myfile' + index" accept=".png, .jpg" :key="'key' + index" style="display: none" @change="handle(item, index, 'myfile' + index)">
      </div>
    </template>
  </DynamicForm>
</template>

<script>
import { FormConfig } from '@localModules/ZhiXinLib/element-components/dynamic-form/ConfigType';
import DynamicForm from '@localModules/ZhiXinLib/element-components/dynamic-form';

export default {
  name: 'FormItem',
  components: {
    DynamicForm,
  },
  props: {
    formDataList: Array,
    index: Number,
  },
  data() {
    return {
      formConfig: new FormConfig(
        {
          span: 6,
        },
        [
          {
            span: 6,
            label: '渲染类型',
            prop: 'type',
            type: 'select',
            props: {
              props: {
                label: 'label',
                value: 'value',
              },
              'allow-create': false,
              filterable: false,
              multiple: false,
              clearable: false,
              'collapse-tags': false,
              disabled: false,
              options: [
                {
                  label: '文字',
                  value: 'text',
                },
                {
                  label: '图片',
                  value: 'img',
                },
              ],
            },
            rules: [{ required: true, message: '不能为空' }],
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'input',
            label: '文字内容/图片路径',
            prop: 'value',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
              type: 'text',
              min: 20,
            },
            setHidden: (formData, formItem) => {
              if (!this.formDataList[this.index].type) {
                return true;
              } else {
                return this.formDataList[this.index].type != 'text';
              }
            },
          },
          {
            label: '上传',
            prop: 'src',
            type: 'slot',
            setHidden: (formData, formItem) => {
              if (!this.formDataList[this.index].type) {
                return true;
              } else {
                return this.formDataList[this.index].type != 'img';
              }
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'inputNumber',
            label: 'X轴位置',
            prop: 'XLocation',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
              min: 0,
              setDisabled: (formData, formItem) => {
                if (!this.formDataList[this.index].disabled) {
                  return false;
                } else {
                  return this.formDataList[this.index].disabled;
                }
              },
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'inputNumber',
            label: 'Y轴位置',
            prop: 'YLocation',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
              setDisabled: (formData, formItem) => {
                if (!this.formDataList[this.index].disabled) {
                  return false;
                } else {
                  return this.formDataList[this.index].disabled;
                }
              },
            },
          },

          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'inputNumber',
            label: 'Z轴位置',
            prop: 'ZLocation',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'input',
            label: 'CSS样式',
            prop: 'style',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
              type: 'text',
              min: 20,
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'inputNumber',
            label: '元素宽度',
            prop: 'divWidth',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'inputNumber',
            label: '元素高度',
            prop: 'divHeight',
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
            },
          },
          {
            rules: [
              // 校验
              { required: true, message: '不能为空' },
            ],
            span: 6,
            type: 'input',
            label: 'CSS样式',
            prop: 'disabled',
            hidden: true,
            props: {
              // maxlength: 3,
              // minlength: 1,
              clearable: false,
              disabled: false,
              readonly: false,
              type: 'text',
              min: 20,
            },
          },
        ]
      ),
    };
  },
  methods: {
    handle(item, index, id) {
      let files = document.getElementById(id).files[0];
      if (files) {
        let fun = (e) => {
          this.$set(this.formDataList[index], item.prop, e);
          console.log(this.formDataList[index]);
        };
        this.fileToBase64(files, fun);
      }
    },
    fileToBase64(file, callback) {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = function () {
        callback(this.result);
      };
    },
  },
};
</script>

<style scoped lang="scss">
</style>
